<template>
    <div class="ccui-home-index">
        <div class="ccui-app-container">
            <!-- 高级搜索 -->
            <div class="ccui-advanced-search-wrapper ccui-clearfix">
                <el-search
                    :formProp="formData"
                    @search="search"
                    @change="change"
                    class="ccui-highsearch no-print"
                    @resetForm="resetForm"
                >
                    <tabsToggle :toggleBtn="toggleBtn" :totalAccount="page.totalNum" :isActive="isActive"
                                @toggleClick="toggleClick"/>
                    <div class="ccui-extend-btn">
                        <el-export-button
                            class="export-button"
                            @export-excel="exportExcel"
                            @export-pdf="exportPdf"
                        />
                    </div>
                    <template slot="search">
                        <el-input
                            v-model="formData.settlementName"
                            clearable
                            searchLabel="结算单名称"
                            placeholder="请输入结算单名称模糊查询"
                            @blur="handleTrim('settlementName')"
                        />
                        <el-input
                            v-model="formData.settlementCode"
                            clearable
                            searchLabel="结算单编号"
                            placeholder="请输入结算单编号模糊查询"
                            @blur="handleTrim('settlementCode')"
                        />
                        <el-input
                            v-model="formData.contractCode"
                            clearable
                            searchLabel="合同编号"
                            placeholder="请输入合同编号模糊查询"
                        />
                        <el-input
                            v-model.trim="formData.formalContractCode"
                            clearable
                            searchLabel="合同正式编号"
                            placeholder="请输入合同正式编号模糊查询"
                        />
                        <el-date-picker
                            v-model="formData.settlementStart"
                            searchLabel="结算期间"
                            :clearable="false"
                            align="right"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        />
                        <el-input
                            v-model="formData.supplierName"
                            clearable
                            searchLabel="供应商"
                            placeholder="请输入供应商模糊查询"
                            @blur="handleTrim('supplierName')"
                        />
                        <el-input
                            v-model="formData.reportUsername"
                            clearable
                            searchLabel="编制人"
                            placeholder="请输入编制人模糊查询"
                            @blur="handleTrim('reportUsername')"
                        />
                        <el-date-picker
                            v-model="formData.reportTime"
                            type="date"
                            searchLabel="编制日期"
                            placeholder="请选择编制日期"
                            @blur="handleTrim('reportTime')"
                        />
                    </template>
                    <!-- 表单高级搜索 -->
                    <el-input
                        v-model="formData.settlementName"
                        clearable
                        searchLabel="结算单名称"
                        placeholder="请输入结算单名称模糊查询"
                        slot="searchItem1"
                        @blur="handleTrim('settlementName')"
                    />
                    <el-input
                        v-model="formData.settlementCode"
                        clearable
                        searchLabel="结算单编号"
                        placeholder="请输入结算单编号模糊查询"
                        slot="searchItem2"
                        @blur="handleTrim('settlementCode')"
                    />
                    <el-input
                        v-model="formData.contractCode"
                        clearable
                        searchLabel="合同编号"
                        placeholder="请输入合同编号模糊查询"
                        slot="searchItem3"
                        @blur="handleTrim('contractCode')"
                    />
                    <el-input
                        v-model.trim="formData.formalContractCode"
                        clearable
                        searchLabel="合同正式编号"
                        placeholder="请输入合同正式编号模糊查询"
                        slot="searchItem4"
                    />
                    <el-date-picker
                        v-model="formData.settlementStart"
                        :clearable="false"
                        searchLabel="结算期间"
                        align="right"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        slot="searchItem5"
                    />
                    <el-input
                        v-model="formData.supplierName"
                        clearable
                        searchLabel="供应商"
                        slot="searchItem6"
                        placeholder="请输入供应商模糊查询"
                        @blur="handleTrim('supplierName')"
                    />
                    <el-input
                        v-model="formData.reportUsername"
                        clearable
                        searchLabel="编制人"
                        slot="searchItem7"
                        placeholder="请输入编制人模糊查询"
                        @blur="handleTrim('reportUsername')"
                    />
                    <el-date-picker
                        v-model="formData.reportTime"
                        type="date"
                        searchLabel="编制日期"
                        placeholder="请选择编制日期"
                        slot="searchItem8"
                        @blur="handleTrim('reportTime')"
                    />
                </el-search>
            </div>
            <!-- Table表格 -->
            <div class="ccui-multifunctional-table-wrapper">
                <Table :table-data="tableData" :table-thead-options="tableTheadOptions" :detailUrl="detailUrl"/>
                <div class="ccui-table-footer" v-show="tableData.length > 0">
                    <Pagination :page="page" @handlePageChange="handlePageChange"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import tabsToggle from "@/basa/components/public_practice/tabsToggle";
import Table from "@/basa/components/public_practice/Table";
import Pagination from "@/basa/components/public_practice/Pagination";
import {getSettlementList} from "@/app/settlement-management/equipment/api/index";
import listMixin from "@/app/settlement-management/equipment/mixins/listMixin";
import { detailExport } from "@/basa/api";
import { exportData } from "@/basa/utils/public";

export default {
    name: "all",
    components: {tabsToggle, Table, Pagination},
    mixins: [listMixin],
    data() {
        return {
            toggleBtn: [
                {
                    label: "全部",
                    status: "5"
                },
            ],
            tableTheadOptions: [
                {
                    type: "index",
                    label: "序号",
                    width: "50",
                    fixed: true
                },
                {
                    label: "结算单编号",
                    prop: "settlementCode",
                    width: "150",
                    fixed: true
                },
                {
                    label: "结算单名称",
                    prop: "settlementName",
                    width: "300"
                },
                {
                    label: "填报单位",
                    prop: "reportInOrgName",
                    width: "200"
                },
                {
                    label: "合同编号",
                    prop: "contractCode",
                    width: "150"
                },
                {
                    label: "合同正式编号",
                    prop: "formalContractCode",
                    width: "150"
                },
                {
                    label: "合同名称",
                    prop: "contractName",
                    width: "300"
                },
                {
                    label: "供应商",
                    prop: "supplierName",
                    width: "200"
                },
                {
                    label: "结算数量",
                    prop: "currSetCount",
                    width: "90"
                },
                {
                    label: "结算金额",
                    prop: "contractMoney",
                    width: "120"
                },
                {
                    label: "编制人",
                    prop: "reportUsername"
                },
                {
                    label: "编制日期",
                    prop: "reportTime",
                    width: "100"
                },
                {
                    label: "单据状态",
                    prop: "settlementStatus",
                    width: "70"
                }
            ],
            detailUrl: "/settlement-management/equipment-preserve/detail"
        }
    },
    methods: {
        //导出当前
        exportExcel() {
            let formDataSearch = JSON.parse(JSON.stringify(this.formData));
    
            detailExport({
                ...formDataSearch,
                type: "equipmentsettlement/accountExport"
            }).then(res => {
                exportData(res);
            });
        },
        // 导出全部
        exportPdf() {
            let formDataSearch = JSON.parse(JSON.stringify(this.formData));
            formDataSearch.pageNo = 1;
            formDataSearch.pageSize = 3000;
            delete formDataSearch.isShowPageLoading;
            detailExport({
                ...formDataSearch,
                type: "equipmentsettlement/accountExport"
            }).then(res => {
                exportData(res);
            });
        },
        // 分页 - 高级搜索 结束 每页显示条数要对上
        // 获取数据
        getList(reqObj) {
            let obj = {};
            let params = typeof reqObj === "object" ? reqObj : obj;
            obj.pageNo = this.page.pageNoCode;
            obj.pageSize = this.page.pageSizeCode;
            obj.settlementStatus = "5";
            obj.isShowPageLoading = true;
            getSettlementList(params).then(res => {
                let result = res.data.data;
                result.rows.map(item => {
                    item.currSetCount = item.currSetCount? item.currSetCount.toFixed(3) : "";
                    item.contractMoney = item.contractMoney? item.contractMoney.toFixed(2) : "";
                    // item.settlementStatus = this.equipmentSettlementStatus[item.settlementStatus];
                    if (item.settlementStatus == "5") {
                        switch (item.writeoffStatus) {
                            case "0":
                                item.settlementStatus = "审批通过";
                                break;
                            case "1":
                                item.settlementStatus = "冲销中";
                                break;
                            case "2":
                                item.settlementStatus = "已冲销";
                                break;
                        }
                    } else {
                        item.settlementStatus = this.equipmentSettlementStatus[item.settlementStatus];
                    }
                });
                this.tableData = result.rows;
                this.page.totalNum = result.recordsTotal;
                this.page.pageNoCode = result.pageNo; // 当前页
            });
        },
    },
    activated() {
        this.getList();
    }
}
</script>

<style scoped>

</style>